.Panel {
    width: 1200px;
    height: 500px;
    max-width: 100%;

    margin: 0 auto;

    .title {
        width: 100%;
        height: 100px;
        position: relative;
        display: flex;
        align-items: center;

        span {
            font-size: 18px;
            color: gray;
            transform: translateY(6px);
            -webkit-transform: translateY(6px);
            -moz-transform: translateY(6px);
            -ms-transform: translateY(6px);
            -o-transform: translateY(6px);
        }

        span:first-child {
            font-size: 30px;
            margin-right: 20px;
            color: black;

            transform: translateY(0);
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
        }

        label {

            position: absolute;
            right: 0;
            color: gray;


        }

        .hotBrandLabel {
            span {
                width: 30px;
                height: 30px;
                background-color: skyblue;
            }
        }

    }

    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 380px;

        .newGoods {
            cursor: pointer;

            &:hover {
                transform: translateY(-5px) scale(1.02);
                -webkit-transform: translateY(-5px) scale(1.02);
                -moz-transform: translateY(-5px) scale(1.02);
                -ms-transform: translateY(-5px) scale(1.02);
                -o-transform: translateY(-5px) scale(1.02);
            }

            transition: all linear 0.2s;

            width: 280px;
            height: 380px;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            border-radius: 5px;
            list-style: none;

            img {
                width: 280px;
                height: 280px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            div {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0px 10px;

                span {
                    display: grid;
                    place-items: center;
                    font-size: 20px;
                    width: 100%;
                    height: 45px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                span:last-child {
                    width: 100%;
                    height: 45px;

                    color: #cf4746;
                }
            }

        }

        .recommend {
            cursor: pointer;

            &:hover {
                transform: translateY(-5px) scale(1.02);
                -webkit-transform: translateY(-5px) scale(1.02);
                -moz-transform: translateY(-5px) scale(1.02);
                -ms-transform: translateY(-5px) scale(1.02);
                -o-transform: translateY(-5px) scale(1.02);
            }

            transition: all linear 0.2s;

            width: 280px;
            height: 380px;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            border-radius: 5px;
            list-style: none;

            img {
                width: 280px;
                height: 280px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            div {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0px 10px;

                span {
                    display: grid;
                    place-items: center;
                    font-size: 20px;
                    width: 100%;
                    height: 45px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                span:last-child {
                    width: 100%;
                    height: 45px;

                    color: #cf4746;
                }
            }

        }

        .hotBrand {
            cursor: pointer;

            &:hover {
                transform: translateY(-5px) scale(1.02);
                -webkit-transform: translateY(-5px) scale(1.02);
                -moz-transform: translateY(-5px) scale(1.02);
                -ms-transform: translateY(-5px) scale(1.02);
                -o-transform: translateY(-5px) scale(1.02);
            }

            transition: all linear 0.2s;

            width: 280px;
            height: 340px;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            border-radius: 5px;
            list-style: none;

            img {
                width: 280px;
                height: 340px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

        }
    }
}